<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: HUI
  Date: 2020/12/14
  Time: 14:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加图书</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>

</head>
<body>
    <div class="container">

        <div class="row">
            <h1>添加图书</h1>
        </div>
        <ul class="nav nav-list"><li class="divider"></li></ul>
        <div class="row">

            <form role="form" id="books">
                <div class="form-group">
                    <label for="bookName">名称</label>
                    <input type="text" class="form-control" name="bookName" id="bookName" placeholder="请输入名称">
                    <label for="bookCounts">数量</label>
                    <input type="text" class="form-control" name="bookCounts" id="bookCounts" placeholder="请输入名称">
                    <label for="detail">描述</label>
                    <input type="text" class="form-control" name="detail" id="detail" placeholder="请输入名称">
                </div>
                <input type="button" onclick="add()" class="btn btn-default" value="提交"/>
            </form>

        </div>

    </div>

    <script type="text/javascript">
        function add() {
            const notyf = new Notyf();
            const bookJson = $('#books').serializeArray();
            $.post("/addBook", bookJson,
                function(data,status){
                    if(status=="success"){
                        notyf.success({
                            message: data["msg"],
                            position: {
                                x: 'center',
                                y: 'center',
                            },
                            dismissible:true,
                            icon: false
                        })}
                });
        }
    </script>

</body>
</html>
